<template>
  <div class="login">
    <div class="login_cont">
      <img src="../../../static/img/login/login_03.jpg"/>
        <div class="login_box clear">
          <div class="login_box1 ">
            <img src="../../../static/img/login/user_06.jpg"/>
          </div>
          <div class="login_box2 ">
            <input typeof="text" name="username" v-model="loginForm.username">
          </div>

          <div class="login_box3">
            <img src="../../../static/img/login/pass_08.jpg"/>
          </div>

          <div class="login_box4 ">
            <input type="password" name="password" v-model="loginForm.password" @keyup.enter="handleLogin">
          </div>
          <div class="login_box5 ">
            <button name="button" @click="handleLogin">登&nbsp;&nbsp;录</button>
          </div>
          <div class="logon_se" style="display: none">
            <select name="areacode">
              <option value="100">示例区域</option>
              <option value="200">可可西里</option>
            </select>
          </div>
          <!--<div class="logon_se" style="display: none">-->
            <!--<select name="equiptype">-->
              <!--<option></option>-->
              <!--<option value="CT">CT</option>-->
              <!--<option value="B超">B超</option>-->
            <!--</select>-->
          <!--</div>-->

        </div>
      <div class="login_text">
        Copyright 2017 金风易通医疗科技有限公司 版权所有
      </div>
    </div>
  </div>
</template>

<script>

  import {login} from '@/api/login'
  import { Message, MessageBox } from 'element-ui'
//  import Header from '@/views/Header/Header'
  export default {
    name: 'login',
    created(){
//      this.$emit('setHeader',false);
    },
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          areacode: 1
        }
      }
    },
    computed: {
      message() {
        return '特朗普说这个页面你不能进......'
      }
    },
    methods: {
      handleLogin() {
          login(this.loginForm.username, this.loginForm.password, this.loginForm.areacode).then(response => {
            this.$router.push({ path: '/Register'});
            this.$notify.success({
              title: '成功',
              message: '登录成功',
              duration: 1000,
              // offset: 100
            });
            window.localStorage.token = 'ris'
            window.localStorage.page=0
            window.localStorage.auditUser=undefined;
            //显示Header
//            this.$emit('setHeader', true);
//            this.$emit('setMenu', menu);
          })
      },
    }
  }
</script>

<style scoped>
  .login{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #061e2b;
    text-align: center;
  }
  .login_cont{
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    width: 681px;
    height: 472px;
    margin-top: -236px;
    margin-left: -340.5px;
  }
  .login_cont>img{
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
  }
  .login_box{
    height: 40px;
    /*border: 1px solid red;*/
    position: absolute;
    width: 601px;
    left: 40px;
    bottom: 30px;
    /*display: box;*/
    /*display: -webkit-box;*/
    /*display: -moz-box;*/
  }
  .login_box>div{
    /*box-flex: 1;*/
    /*-webkit-box-flex: 1;*/
    /*-moz-box-flex: 1;*/
    float: left;
  }
  .login_box1{
    display: block;
    width: 35px;
    height: 35px;
  }
  .login_box2,.login_box4{
    width: 174px;
    background-color: #fff;
    color: #333;
    height: 36px;
    margin-left: 1px;
  }
  .login_box2 input, .login_box4 input{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 14px;
    padding: 0 10px;
  }
  .login_box3{
    width: 35px;
    height: 35px;
    margin-left: 30px;
  }
  .login_box5{
    width: 100px;
    height: 36px;
    margin-left: 50px;
  }
  .login_box5 button{
    color: #fff;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 0;
    background-color: #25c4c6;
    font-size: 14px;
  }
  .login_checkbox{
    /*border: 1px solid red;*/
    position: absolute;
    width: 601px;
    left: 40px;
    bottom: 8px;
    height: 20px;
    text-align: left;
    color: #fff;
  }
  .login_checkbox input[type=checkbox]{
    position: relative;
    top: 3px;
  }
  .login_text{
    width: 100%;
    position: absolute;
    bottom: -20px;
    color: #fff;
    text-align: center;
  }

  .logon_se select{
    width: 210px;
    margin: 0px 30px 0 0;
    height: 24px;
    border: 1px solid #999;
    padding: 0 10px ;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 0 0 3px 3px;
    background-color: #fff9f6;
  }
</style>
